<template>
  <div :class="[navMenuState ? 'navMenuState' : '', 'interface']">
      <ul v-if = "urls.length">
        <li v-for= "(page, index) in urls" @click="turnPage(index)" :class="{active:active===page._id}" :title="page.name" class="fl">
          <strong>{{page.name}} </strong>
          <span @click="open(page.url, page.name)">
            <i class="icon-duijie iconfont"></i>
          </span>
        </li>
        <li class="fr last"><a href="javascript:;" @click="getToken"><i class="iconfont icon-shuaxin"></i></a></li>
      </ul>
      <ul v-else>
        <li>{{$t('public.noInterFace')}}</li>
      </ul>
      <div class="page">
        <!--sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-pointer-lock allow-modals allow-forms allow-presentation"-->
        <!--解决客户首页对接CRM系统时，报错，没法tab切换的问题-->
        <iframe  v-for= "page in urls" v-show="active===page._id" :src="src(page)"></iframe>
      </div>
  </div>
</template>
<script>
  import {deepClone} from '@/utils/m7Utils.js'
 // console.log(session.user.displayName)
 // 生成客户页面对接校验所需token
  function getToken (store) {
    return store.dispatch('getToken')
  }
  export default({
    name: 'interface',
    data () {
      return {
        active: '',
        token: {},
        message1: '',
        btn: false,
        urls: '',
        index: 0
      }
    },
    methods: {
      turnPage (index) {
        this.active = this.urls[index]._id
        this.index = index
      },
      src (page) {
        let url = page.url.indexOf('?') !== -1 ? page.url + '&loginName=' + this.ur.displayName + '&loginExten=' + this.ur.exten : page.url + '?loginName=' + this.ur.displayName + '&loginExten=' + this.ur.exten
        url += '&accountId=' + this.$store.state.session.account.account
        if (page.url.indexOf('power.7moor.com') > -1 || page.url.indexOf('power-') > -1) {
          if (this.$store.state.session.sessionId && window.sessionStorage.getItem('loginToken')) {
            url += '&sessionId=' + this.$store.state.session.sessionId + '&loginToken=' + window.sessionStorage.getItem('loginToken')
          }
        }
        if (this.$store.state.session.account.tokenCheck) {
          url += '&token=' + this.token.token + '&tokenId=' + this.token.tokenId
        }
        return url
      },
      cli () {
        this.btn = !this.btn
      },
      getToken () {
        if (this.urls && this.urls.length > 0 && !this.$store.state.session.account.tokenCheck) {
          this.urls[this.index].url = this.urls[this.index].url + '#1'
        }
        if (this.$store.state.session.account.tokenCheck && this.urls && this.urls.length > 0) {
          getToken(this.$store).then((token) => {
            this.token = this.$store.state.session.user.userToken
          })
        }
      },
      open (url, name) {
        if (this.btn === false) {
          this.btn = true
        }
        let tUrl = url ? (url.indexOf('?') !== -1 ? url + '&loginName=' + this.ur.displayName + '&loginExten=' + this.ur.exten : url + '?loginName=' + this.ur.displayName + '&loginExten=' + this.ur.exten) : ''
        tUrl += '&accountId=' + this.$store.state.session.account.account
        if (this.$store.state.session.account.tokenCheck && tUrl) {
          tUrl += '&token=' + this.token.token + '&tokenId=' + this.token.tokenId
        }
        if (url && (url.indexOf('power.7moor.com') > -1 || url.indexOf('power-') > -1)) {
          if (this.$store.state.session.sessionId && window.sessionStorage.getItem('loginToken')) {
            tUrl += '&sessionId=' + this.$store.state.session.sessionId + '&loginToken=' + window.sessionStorage.getItem('loginToken')
          }
        }
        let dragMess = {url: tUrl, name: name, open: true}
        this.$store.commit('SET_DRAGPOP', dragMess)
      }
    },
    computed: {
      ur () {
        return this.$store.state.session.user
      },
      navMenuState () {
        return this.$store.state.navMenuState || false
      }
    },
    beforeMount () {
      this.$store.dispatch('getCache', {type: 'urls'}).then(() => {
        this.urls = deepClone(this.$getCache('urls'))
        this.urls.forEach(function (item) {
          item.url = item.url.replace('http://', '//')
        })
        this.active = this.urls[0] ? this.urls[0]._id : ''
        if (this.$store.state.session.account.tokenCheck && this.urls && this.urls.length > 0) {
          getToken(this.$store).then((token) => {
            this.token = token
          })
        }
      })
    }
  })
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .interface
    height calc(100vh - 53px)
    height -webkit-calc(100vh - 53px)
    height -moz-calc(100vh - 53px)
    ul
      width 100%
      height 40px
      border-bottom 1px solid $c-border2
      .last
        margin-right 20px
        color $c-main
      li
        height 38px
        font-size 14px
        cursor pointer
        line-height 40px
        color $cf-gray1
        padding 0 8px
        .iconfont
          font-size 14px
          font-weight bold
          color $cf-level2
        a
          .iconfont
            color $c-main
            font-size 18px
            display block
      .active
        color $c-main
        border-bottom 3px solid $c-main
        .iconfont
          color $c-main
    .page
      width calc(100vw - 57px)
      width -webkit-calc(100vw - 57px)
      width -moz-calc(100vw - 57px)
      height calc(100vh - 52px - 40px)
      height -webkit-calc(100vh - 52px - 40px)
      height -moz-calc(100vh - 52px - 40px)
      overflow hidden
      position relative
      background $cf-white
      iframe
        position absolute
        width 100%
        height 100%
        border none
        overflow auto
        display block
  .navMenuState
    .page
      width calc(100vw - 120px)
      width -webkit-calc(100vw - 120px)
      width -moz-calc(100vw - 120px)
</style>
